<template>
  <div style="position: relative;margin-top:20px">
    <div style="height:90px;"></div>
    <div class="H2title" :class="isshow ? 'move' : ''" ref="pronbit">
      <h2 :style="$store.getters.screenWidth ? 'font-size:28px': ''">关于我们</h2>
    </div>
    <div style="font-size:16px;font-weight:300;margin-bottom:20px">
      ABOUT US
    </div>
    <image-text :id="105"></image-text>
    <div style="width:100%;height:50px"></div>
  </div>
</template>

<script>
import imageText from '../components/imageText'
export default {
  name: "CenterTitle",
  props: {
    msg: String
  },
  data() {
    return {
      isshow: true,
      bottom_list: [1, 2, 3, 4]
    };
  },
  components: {
    imageText
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  methods: {
    handleScrollx() {
      let llheight = document.body.clientHeight; //视窗高度
      if(this.$refs.pronbit){
         let topheight = this.$refs.pronbit.getBoundingClientRect().top;
      if (llheight - topheight > 20) {
        this.isshow = true;
      } else {
        this.isshow = false;
      }
      }
      
    }
  }
};
</script>

<style lang="scss" scoped>
img{
  max-width: 100%!important;
}
.H2title {
  width: 100%;
  margin-top: 60px;
  position: absolute;
  top: -150px;
  opacity: 0;
}
.H2title h2 {
  font-size: 36px;
  font-weight: 300;
}
.move {
  animation: rotatep 1s linear 0.2s;
  animation-fill-mode: forwards;
}

@keyframes rotatep {
  0% {
    top: -80px;
    opacity: 0;
  }
  100% {
    top: -40px;
    opacity: 1;
  }
}
@keyframes rotatebottom {
  0% {
    transform: translate(0px, 50px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
.movebottom {
  animation: rotatebottom 1s linear 0.2s;
}
.index_from_bottom {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 40px;
  .index_from_bottom_item {
    padding-top: 10px;
  }
}
</style>
